<template>
<!-- 分割线-->
  <el-divider />
  <el-card :body-style="{ padding: '0px' }">
    <img src="https://i.bmp.ovh/imgs/2022/04/04/3022e5cb5204fcca.png" class="image">
    <div style="padding: 14px;">
      <span>请假流程</span>
      <div class="bottom clearfix">
        <time class="time">{{ currentDate }}</time>
        <el-button type="text" class="button" @click="sendNewFlow">发起一个新流程</el-button>
      </div>
    </div>
  </el-card>
  <el-drawer
      v-model="drawer"
      title="填写审批内容"
      :direction="direction"
      :before-close="handleClose"
  >
    <el-form :model="form">
      <el-form-item label="发起人ID">
        <el-input v-model="form.sendName" disabled></el-input>
      </el-form-item>
      <el-form-item label="审批人ID">
        <el-select v-model="form.applyName" placeholder="请选择审批人">
          <el-option label="王泽" value="wangze" />
          <el-option label="刘雪梦" value="lxm20" />
          <el-option label="曹博言" value="cby66" />
          <el-option label="导员" value="zjx33" />
        </el-select>
      </el-form-item>

      <el-form-item>
        <el-button type="primary" @click="onSubmit">创建审批流程</el-button>
      </el-form-item>
    </el-form>
  </el-drawer>
  <el-card :body-style="{ padding: '0px' }">
    <img src="https://i.bmp.ovh/imgs/2022/04/04/66d5b3dec45cb854.png" class="image">
    <div style="padding: 14px;">
      <span>其他流程</span>
      <div class="bottom clearfix">
        <time class="time">{{ currentDate }}</time>
        <el-button type="text" class="button">其他流程</el-button>
      </div>
    </div>
  </el-card>
</template>

<script>
import {mapState} from "vuex";
import axios from "axios";

export default {
  name: "image",
  computed: mapState([
    "auth"
  ]),
    data() {
        return {
          currentDate: new Date(),
          drawer: false,
          direction: 'rtl',
          form:{
            sendName:'',
            applyName:'',
          }
        }
    },
    methods:{
      //发起一个新流程
      sendNewFlow(){
        this.form.sendName = this.auth.username;
        this.drawer = true;
      },
      handleClose(done) {
        this.$confirm('确认关闭？')
            .then(_ => {
              done();
            })
            .catch(_ => {});
      },
      onSubmit(){
        let sendName = this.form.sendName;
        let applyName = this.form.applyName;
        axios.post('http://localhost:8410/flowable/sendOA?sendName='+sendName+'&applyName='+applyName).then(res=>{
          console.log(res);
          if (res.status === 200){
            alert("新建流程成功，processID为："+res.data.processId)
          }
          this.drawer = false;
        })
      }
    }
}
</script>

<style>
.time {
  font-size: 13px;
  color: #999;
}

.bottom {
  margin-top: 13px;
  line-height: 12px;
}

.button {
  padding: 0;
  float: right;
}

.image {
  width: auto;
  height: auto;
  display: block;
}

.clearfix:before,
.clearfix:after {
  display: table;
  content: "";
}

.clearfix:after {
  clear: both
}
</style>

